<template>
  <div class="home">
    <Nav :title="title" :back="back"></Nav>
    <!-- 主体 -->
    <div class="main">
      <!-- 轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in value.res" :key="item.title"><img class="swiperImg" :src="item.headImgSrc" alt=""></van-swipe-item>
      </van-swipe>

      <div class="container" v-for="item in value.res" :key="item.title">
        <div class="nav">
          <img class="navImg" :src="item.avatar" />
          <span class="navTime">{{item.date}}</span>
        </div>
        <div class="title">{{item.title}}</div>
        <img class="mainImg" :src="item.imgSrc" @click="gotoDetail(item._id)" />
        <div class="detail" :style="{'-webkit-line-clamp':lineNum}">{{item.detail}}</div>
        <div class="moreOrlest">
          <div class="more" @click="moreMsg">{{more}}</div>
        </div>
        <div class="iconItem">
          <img class="icon" src="../assets/images/icon/chat1.png" />
          <span class>{{item.collection}}</span>
          <img class="icon" src="../assets/images/icon/view.png" />
          <span class>{{item.reading}}</span>
          <img
            class="collect icon"
            :src="item.collected?'../assets/images/icon/collection.png':'../assets/images/icon/collection-anti.png'"
          />
        </div>
      </div>
    </div>
    <TabBar></TabBar>
  </div>
</template>

<script>
import articleList from "../models/articleList";
import Nav from '../components/Nav'
export default {
  name: "Home",
  data() {
    return {
      title:"文与字",
      back:"/",
      value: [],
      lineNum: 3,
      more: "展开↓"
    };
  },
  components: {
    Nav
  },
  async mounted() {
    var data = await articleList();
    this.value = data.data;
  },
  methods: {
    // 展开和收起
    moreMsg() {
      if (this.lineNum == 3) {
        (this.lineNum = 20), (this.more = "收起↑");
      } else {
        (this.lineNum = 3), (this.more = "展开↓");
      }
    },
    // 跳转
    gotoDetail(id){
      this.$router.push({name:'ArticleDetail',query: { id: id }})
    }
  }
};
</script>
<style scoped>
.home{
  background-color: #f3f3f3;
}
.swiperImg {
  width: 100%;
  height: 400px;
}
.nav {
  display: flex;
  align-items: center;
}
.container {
  background-color: #fff;
  margin-bottom: 30px;
}
.navImg {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.navTime {
  font-size: 25px;
  margin-left: 50px;
}
.mainImg {
  width: 100%;
  height: 400px;
}
.title {
  margin: 20px 10px;
  font-weight: 800;
}
.detail {
  font-size: 30px;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.moreOrlest {
  overflow: hidden;
  padding: 10px;
}
.more {
  font-size: 30px;
  float: right;
}

.icon {
  width: 40px;
  height: 40px;
}
.iconItem {
  display: flex;
  font-size: 30px;
  color: #888;
}
.iconItem > span {
  display: flex;
  align-items: center;
  padding: 0 20px 0 5px;
}
</style>